import React from 'react';
import { Service } from '../types/service';

type ServiceCardProps = Service & {
  onClick?: () => void;
};

const ServiceCard: React.FC<ServiceCardProps> = ({ 
  title, 
  description, 
  isOfficial, 
  icon,
  onClick 
}) => {
  return (
    <div
      onClick={onClick}
      className="flex items-center p-4 bg-white/95 backdrop-blur-sm rounded-xl 
                 shadow-[0_2px_8px_rgba(0,0,0,0.08)] hover:shadow-[0_4px_12px_rgba(0,0,0,0.12)] 
                 transition-all duration-200 border border-gray-200/50 mb-4 cursor-pointer
                 hover:bg-white hover:border-gray-200"
    >
      <div className="w-12 h-12 bg-gradient-to-br from-blue-50 to-indigo-50 
                    rounded-xl flex items-center justify-center mr-4 shadow-sm border border-blue-100/50">
        <span className="text-2xl">{icon}</span>
      </div>
      <div className="flex-1">
        <div className="flex items-center">
          <h3 className="text-lg font-medium text-gray-800">{title}</h3>
          {isOfficial && (
            <span className="ml-2 text-sm font-medium text-blue-600 bg-blue-50 
                           px-2 py-0.5 rounded-full border border-blue-100/50">
              官方
            </span>
          )}
        </div>
        <p className="text-gray-600 text-sm mt-1 leading-relaxed">{description}</p>
      </div>
    </div>
  );
};

export default ServiceCard;